<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钩子函数</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="应用"></div>
    <script>
        const 根组件 = {
            beforeCreate() {
                console.log('组件即将创建.')
            },
            created() {
                console.log('组件创建完成.')
                setTimeout(() => {this.卸载()}, 5000)
            },
            template: `<div @click='递增'>钩子函数, 计数器: {{计数器}}</div>
            <keep-alive v-if='显示'><cache ref='缓存组件'></cache></keep-alive>`,
            beforeMount() {
                console.log('组件即将挂载.')
            },
            mounted() {
                console.log('组件挂载完成.')
            },
            beforeUpdate() {
                console.log('组件即将更新.')
            },
            updated() {
                console.log('组件更新完成.')
            },
            beforeUnmount() {
                console.log('组件即将卸载.')
            },
            unmounted() {
                console.log('组件卸载完成.')
            },
            errorCaptured(err, instance, info) {
                console.log('捕获来自子组件的异常.')
            },
            renderTriggered(event) {
                console.log('虚拟 DOM 触发渲染.')
            },
            renderTracked(event) {
                console.log('虚拟 DOM 重新渲染.')
            },
            data() {
                return {
                    计数器: 0,
                    显示: false,
                }
            },
            methods: {
                递增() {
                    this.计数器 += 1
                    this.显示 = !this.显示
                },
                卸载() {
                    应用.unmount()
                }
            },
        }
        const 缓存组件 = {
            activated() {
                console.log('被缓存的组件激活.')
            },
            deactivated() {
                console.log('被缓存的组件停用.')
            },
            updated() {
                console.log('子组件更新完成.')
                this.抛出异常()
            },
            template: `<div>缓存的组件</div>`,
            methods: {
                抛出异常() {
                    throw new Error('异常测试.')
                }
            }
        }
        const 应用 = Vue.createApp(根组件)
        应用.component('cache', 缓存组件)
        应用.mount('#应用')
    </script>
</body>
</html>